// 基础功能组件
import Plugin from '@ckeditor/ckeditor5-core/src/plugin'
// 按钮视图组件
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview'

// 按钮的图标 SVG
const chartIcon = `<svg t="1589421479341" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2641" width="200" height="200"><path d="M544 661.333333a32 32 0 0 1-64 0V362.666667a32 32 0 0 1 64 0v298.666666z m160 0a32 32 0 0 1-64 0V490.666667a32 32 0 0 1 64 0v170.666666z m-320 0a32 32 0 0 1-64 0V448a32 32 0 0 1 64 0v213.333333zM202.666667 138.666667h618.666666c64.8 0 117.333333 52.533333 117.333334 117.333333v512c0 64.8-52.533333 117.333333-117.333334 117.333333H202.666667c-64.8 0-117.333333-52.533333-117.333334-117.333333V256c0-64.8 52.533333-117.333333 117.333334-117.333333z m0 64a53.333333 53.333333 0 0 0-53.333334 53.333333v512a53.333333 53.333333 0 0 0 53.333334 53.333333h618.666666a53.333333 53.333333 0 0 0 53.333334-53.333333V256a53.333333 53.333333 0 0 0-53.333334-53.333333H202.666667z" p-id="2642"></path></svg>
`

// 自定义组件需要继承基础组件
class Chart extends Plugin {
    // 重写基础组件的初始化函数
    init () {
        // 获取当前编辑器
        const editor = this.editor
        // 从当前编辑器的配置中获取传入的自定义配置名称
        const chart = this.editor.config.get('chart')

        // 将自定义按钮添加到当前编辑器的组件工厂
        editor.ui.componentFactory.add('chart', locale => {
            // 获取当前编辑器的按钮视图
            const view = new ButtonView(locale)

            // 在按钮视图中注入自定义按钮的名称、图标
            view.set({
                label: '插入图表',
                icon: chartIcon,
                tooltip: true
            })

            // 点击按钮
            view.on('execute', () => {
                // 执行自定义配置中指定的回调函数
                chart.handler.call(this.editor)
                // const viewFragment = this.editor.data.processor.toView( "hehe" );
                // const modelFragment = this.editor.data.toModel( viewFragment );
                // this.editor.model.insertContent(modelFragment);
            })

            // 返回修改后的视图内容
            return view
        })
    }
}

// 对外暴漏自定义组件
export default Chart